<template>
  <!-- 顶部tab栏 -->
  <div class="screen-nav">
    <h1>
      <!-- <router-link :to="defaultLink()" class="title">{{ title }}</router-link> -->
      <div class="title">{{ title }}</div>
    </h1>
    <ul class="nav">
      <!-- <li v-for="route in routes"><router-link :to="route.path">{{ route.meta.title }}</router-link></li> -->
      <li v-for="(route, index) in routes" :key="index">
        <router-link :to="routesLink(route.link)">{{
          route.title
        }}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "ScreenNav",
  created() {
    if (this.$route.fullPath.includes("/by")) {
      this.title = "北营街道综合行政执法智慧服务平台";
      this.prefixRoute = "/by";
    } else {
      this.title = "小店区城市运行管理服务平台";
      this.prefixRoute = null;
    }
  },
  data() {
    return {
      routes: [],
      title: "",
      prefixRoute: null,
    };
  },
  computed: {
    defaultLink() {
      return () => {
        if (this.prefixRoute) {
          return this.prefixRoute + "/default";
        } else {
          return "/default";
        }
      };
    },
    routesLink() {
      return (link) => {
        if (this.prefixRoute) {
          return this.prefixRoute + link;
        } else {
          return link;
        }
      };
    },
  },
  mounted() {
    this.getRoutes();
  },
  methods: {
    getRoutes() {
      this.routes = [
        {
          activeColor: 0,
          createTime: "",
          display: 0,
          homeState: 0,
          id: 99,
          img: "",
          link: "/default",
          rank: 4,
          title: "首页",
        },
        {
          activeColor: 0,
          createTime: "2023-04-06 14:10:44",
          display: 0,
          homeState: 0,
          id: 7,
          img: "",
          link: "/zhjx",
          rank: 1,
          title: "智慧街乡",
        },
        {
          activeColor: 0,
          createTime: "2021-05-31 15:38:31",
          display: 0,
          homeState: 0,
          id: 1,
          img: "",
          link: "/jklb",
          rank: 2,
          title: "云巡查",
        },
        {
          activeColor: 0,
          createTime: "2021-06-03 16:45:50",
          display: 0,
          homeState: 0,
          id: 3,
          img: "",
          link: "/zdjj",
          rank: 3,
          title: "占道经营",
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.screen-nav {
  background: url(../../assets/images/layout/top.png) no-repeat 0 0;
  width: 100%;
  height: 85px;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1987;
  display: flex;
  align-items: center;
}
.sc-nav {
  background: url(../../assets/images/layout/sc-top.png) no-repeat;
  background-position: center center;
  .screen-nav-title {
    width: 100%;
    font-size: 40px;
    margin-top: -10px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #eff6ff;
    background: linear-gradient(1deg, #d4e7ee 0%, #f9feff 99.0478515625%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
  }
}

.title {
  margin: 0 20px;
  font-size: 34px;
  background-image: -webkit-linear-gradient(top, #20a8ff, #26ffed);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav {
  display: flex;
  margin-left: 264px;

  li {
    margin: 0 20px;
  }

  a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 22px;
    position: relative;

    &:after {
      content: "";
      display: block;
      width: 0;
      height: 4px;
      background: #00dcff;
      border-radius: 2px;
      position: absolute;
      bottom: -10px;
      left: 50%;
      margin-left: -18px;
      transition: all 0.5s ease;
    }
  }

  .router-link-active {
    color: #00dcff;
    font-weight: bold;

    &::after {
      width: 36px;
    }
  }
}
</style>

